<script setup lang="ts">

const props = defineProps({
  data:{
    type:Object,
    default(){
      return {}
    }
  }
})

</script>

<template>
<!--  <div class="w-[392px] h-[299px] mt-[40px] ml-[77px] bg1 overflow-visible relative">-->
<!--    <div class="w-[96px] h-[142px] absolute top-[-23px] left-[6px] flex flex-col items-center bg2">-->
<!--      <div class="text-[16px] text-[#808080] ff-DINAlternate-Bold">-->
<!--        <span class="text-[32px] text-[#FB2D19]">{{ data[0]?.[0]?.value }}</span>lux-->
<!--      </div>-->
<!--      <div class="text-[18px] text-[#1A1A1A] font-medium">光照</div>-->
<!--    </div>-->
<!--    <div class="w-[96px] h-[142px] absolute top-[-17px] right-[10px] flex flex-col items-center bg2">-->
<!--      <div class="text-[16px] text-[#808080] ff-DINAlternate-Bold">-->
<!--        <span class="text-[32px] text-[#FB2D19]">{{ data[1]?.[0]?.value }}</span>dB-->
<!--      </div>-->
<!--      <div class="text-[18px] text-[#1A1A1A] font-medium">噪声</div>-->
<!--    </div>-->
<!--    <div class="w-[96px] h-[142px] absolute bottom-[-18px] left-[4px] flex flex-col items-center bg2">-->
<!--      <div class="text-[16px] text-[#808080] ff-DINAlternate-Bold">-->
<!--        <span class="text-[32px] text-[#FB2D19]">{{ data[2]?.[1]?.value }}</span>°C-->
<!--      </div>-->
<!--      <div class="text-[18px] text-[#1A1A1A] font-medium">温度</div>-->
<!--    </div>-->
<!--    <div class="w-[96px] h-[142px] absolute bottom-[-31px] right-[16px] flex flex-col items-center bg2">-->
<!--      <div class="text-[16px] text-[#808080] ff-DINAlternate-Bold">-->
<!--        <span class="text-[32px] text-[#FB2D19]">{{ data[2]?.[0]?.value }}</span>%-->
<!--      </div>-->
<!--      <div class="text-[18px] text-[#1A1A1A] font-medium">湿度</div>-->
<!--    </div>-->
<!--  </div>-->
  <div class="flex flex-wrap pl-[41px] mt-[38px]">
    <div class="w-[218px] h-[64px] pl-[16px] flex items-center bg">
      <div class="flex items-center">
        <img class="w-[32px] h-[32px]" src="@/assets/img/hj/2.png">
        <span class="text-[20px] text-[#1A1A1A] font-medium ml-[6px]">光照</span>
      </div>
      <div class="text-[21px] text-[#808080] ff-DINAlternate-Bold ml-[25px]">
        <span class="text-[37px] text-[#FB2D19]">{{ data[0]?.[0]?.value }}</span>lux
      </div>
    </div>
    <div class="w-[218px] h-[64px] pl-[16px] flex items-center ml-[22px] bg">
      <div class="flex items-center">
        <img class="w-[32px] h-[32px]" src="@/assets/img/hj/3.png">
        <span class="text-[20px] text-[#1A1A1A] font-medium ml-[6px]">噪声</span>
      </div>
      <div class="text-[21px] text-[#808080] ff-DINAlternate-Bold ml-[25px]">
        <span class="text-[37px] text-[#FB2D19]">{{ data[1]?.[0]?.value }}</span>dB
      </div>
    </div>
    <div class="w-[218px] h-[64px] pl-[16px] flex items-center mt-[22px] bg">
      <div class="flex items-center">
        <img class="w-[32px] h-[32px]" src="@/assets/img/hj/4.png">
        <span class="text-[20px] text-[#1A1A1A] font-medium ml-[6px]">温度</span>
      </div>
      <div class="text-[21px] text-[#808080] ff-DINAlternate-Bold ml-[25px]">
        <span class="text-[37px] text-[#FB2D19]">{{ data[2]?.[1]?.value }}</span>°C
      </div>
    </div>
    <div class="w-[218px] h-[64px] pl-[16px] flex items-center ml-[22px] mt-[22px] bg">
      <div class="flex items-center">
        <img class="w-[32px] h-[32px]" src="@/assets/img/hj/5.png">
        <span class="text-[20px] text-[#1A1A1A] font-medium ml-[6px]">湿度</span>
      </div>
      <div class="text-[21px] text-[#808080] ff-DINAlternate-Bold ml-[25px]">
        <span class="text-[37px] text-[#FB2D19]">{{ data[2]?.[0]?.value }}</span>%
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.bg{
  background: url("@/assets/img/hj/bg_hjsssj.png") 0 0 / 100% 100% no-repeat;
}

.bg1{
  background: url("@/assets/img/hj/8.png") 0 0 / 100% 100% no-repeat;
}

.bg2{
  background: url("@/assets/img/hj/9.png") 0 0 / 100% 100% no-repeat;
}
</style>
